<template>
  <div class="app-container">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>平台设置</span>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
          style="float:right"
        >编辑设置</el-button>
      </div>
      <div class="text item">
        <el-row style="margin-bottom:20px">
          <el-col :span="6">
            <div class="grid-content ">
              手续费：{{ info.tax }}(百分制)
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ">
              日提现限制金额：{{ info.mostMoney }}(元)
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ">
              日提现限制次数：{{ info.mostNum }}(次)
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ">
              提现手续费：{{ info.transferPrice }}(元)
            </div>
          </el-col>
        </el-row>

      </div>
    </el-card>

    <el-dialog
      title="编辑"
      :visible.sync="dialogFormVisible"
      top="2vh"
      width="450px"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="130px"
        style="width: 300px; margin-left:50px;"
      >
        <el-form-item
          label="转账税率："
          prop="tax"
        >
          <el-input v-model="temp.tax" />
        </el-form-item>
        <el-form-item
          label="日提现限制金额："
          prop="mostMoney"
        >
          <el-input v-model="temp.mostMoney" />
        </el-form-item>
        <el-form-item
          label="日提现限制次数："
          prop="mostNum"
        >
          <el-input v-model="temp.mostNum" />
        </el-form-item>
        <el-form-item
          label="提现手续费："
          prop="transferPrice"
        >
          <el-input v-model="temp.transferPrice" />
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus==='create'?createData():updateData()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
const defaultFormThead = ["apple", "banana"];
import { getManyList, alarmList, setAdd, config } from "@/api/v1";
import waves from "@/directive/waves"; // Waves directive
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { parseTime } from "@/utils";

export default {
  directives: { waves },
  components: { Pagination },
  filters: {
    typeFilter(type) {
      if (type == 1) {
        return "调用浦发接口异常";
      } else if (type == 2) {
        return "浦发账户余额不足";
      } else {
        return "";
      }
    }
  },
  data() {
    return {
      tableData: [],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      cooperation: [],
      listQuery: {
        page: 1,
        limit: 20,
        sort: "+id",
        phone: "",
        startDay: "",
        endDay: ""
      },
      info: {},
      key: 1, // table key
      formTheadOptions: ["apple", "banana", "orange"],
      checkboxVal: defaultFormThead, // checkboxVal
      formThead: defaultFormThead, // 默认表头 Default header
      dialogFormVisible: false,
      temp: {
        tax: "",
        mostMoney: "",
        mostNum: "",
        transferPrice:'',
        id:""
      },
      TypeOptions: [
        { id: 1, value: "调用浦发接口异常" },
        { id: 2, value: "浦发账户余额不足" }
      ],
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "change" }]
      }
    };
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      );
      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },
  created() {
    this.getList();
  },
  methods: {
    resetTemp() {
      this.temp.id = "";
      this.temp.tax = "";
      this.temp.mostMoney = "";
      this.temp.mostNum = "";
    },

    handleCreate() {
      this.resetTemp();
      this.temp.id = this.info.id;
      this.temp.tax = this.info.tax;
      this.temp.mostMoney = this.info.mostMoney;
      this.temp.mostNum = this.info.mostNum;
      this.temp.transferPrice = this.info.transferPrice;
      console.log(this.temp);
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["temp"].clearValidate();
      });
    },
    createData() {
      this.$refs["temp"].validate(valid => {
        if (valid) {
          console.log(this.temp);
          setAdd(this.temp).then(res => {
            // this.list.unshift(this.temp);
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
              duration: 2000
            });
            this.getList();
          });
        }
      });
    },
    getList() {
      this.listLoading = true;
      config(this.listQuery).then(res => {
        this.info = res.data;
        // this.total = Number(res.data.data.total);
        console.log(this.tableData);
        // Just to simulate the time of the request
      });
    },

    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    }
  }
};
</script>
<style>
</style>
